<template>
  <view style="position: relative; width: 100%;">
    <u-input
      ref="uFormInput"
      v-model="inputValue"
      :placeholder="placeholder"
      :disabled="disabled"          
      :maxlength="maxInputLength"
      :required="required"
      :style="inputStyle"
      :type="type"
    />
    <slot />
  </view>
</template>

<script>

import { Definition } from '../../engine/common/definition';

export default {
  name: 'FocusAlignInput',
  props: {
    modelValue: String,
    placeholder: String,
    disabled: Boolean,
    maxLength: Number,
    required: {
      type: Boolean,
      default: false
    },
     // input 控件后面有其他控件时，input 框与其他控件间隔，默认44
    paddingRight: { 
      type:  Number,
      default: 44  // 默认值 44px
    },
     type: {
      type: String,
      default: 'textarea'
    },
  },
  emits: ['update:modelValue'],
  data() {
    return {
      isFocused: false,
      inputValue: this.disabled ? (this.modelValue || " ") : this.modelValue  // 只读模式，如果为空用一个空格占位
    };
  },

  computed: {
    maxInputLength() {
      return this.maxLength ?? Definition.maxTextLenForRemark;
    },

    // 是否后面跟有控件
hasSlotContent() {
  const slot = this.$slots.default && this.$slots.default();
  if (!slot) return false;
  // 过滤掉注释节点（type 为 Symbol(v-cmt)），空文本等
  return slot.some(vnode => {

   // console.log('---> hasSlotContent:' +  vnode.type);
    // 注释节点
    if (typeof vnode.type === 'symbol') return false;
    // 过滤空文本节点
    if (
      (typeof vnode.type === 'string' && vnode.type === 'text' && (!vnode.children || !vnode.children.toString().trim()))
    ) return false;
    // 其它节点（如 v-if 为 true 的组件/元素）返回 true
    return true;
  });
},

  // 后面跟有控件时保留一定控件
  inputStyle() {
    return {
      width: '100%',
      boxSizing: 'border-box',
      paddingRight: this.hasSlotContent ? this.paddingRight+'px' : '0'
    };
  }
  },
  watch: {
    modelValue(val) {
      this.inputValue = val;
    },
      inputValue(val) {
    this.$emit('update:modelValue', val);
  }
  },
  methods: {
    // 实现 uView 表单协议
    focus() {
      this.$refs.uFormInput && this.$refs.uFormInput.focus && this.$refs.uFormInput.focus();
    },
    blur() {
      this.$refs.uFormInput && this.$refs.uFormInput.blur && this.$refs.uFormInput.blur();
    }
  }
};
</script>

<style>

</style>